<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容(最多120字)" maxlength="120">
        </textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
           <div class="cmt-item" v-for="(item,index) in comments" :key="index">
               <div class="cmt-title">
                第{{index+1}}楼&nbsp;&nbsp;用户: {{item.nick}}&nbsp;&nbsp;发表时间: {{item.startTime}}
               </div>
               <div class="cmt-body"></div>
                   {{item.content}}
               </div>
        </div>
        
        <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
    </div>
</template>

<script>
//设置接口代理,解决跨域问题
const API_PROXY = 'https://bird.ioliu.cn/v1/?url='  

import { Toast } from 'mint-ui'

export default {
    data(){
        return {
            // pageIndex: 1,
             comments: []
            // msg: ''  //发表评论的内容
        }
    },
    created() {
        this.getComments()
    },
    methods: {
        getComments(){
            
            // this.$http.get("https://m.maoyan.com/mmdb/comments/movie/248566.json?_v_=yes&offset=1")
            // .then(result => {
            //     console.log(result.body)
            //      if(result.body.code == 200) {//数据拼接,新数据拼接旧数据
            //              //this.comments = this.comments.concat(result.body.cmt)
            //              this.comments = result.body.cmt
            //       }else{
            //           Toast('获取评论列表失败!')
            //       }
            // })
             let _this = this
            _this.$axios.get(API_PROXY + 'https://m.maoyan.com/mmdb/comments/movie/248566.json?_v_=yes&offset=1')
            .then(function (response) {
            console.log(response.data)
            _this.comments = response.data.cmts
            })
            .catch(function (err) {
             Toast(err)
            })
                
        },
        loadMore(){
        //    this.pageIndex++
        //    this.getComments()

        },
        postComment(){

            //   if(this.msg.trim() == 0) {
            //       return Toast('评论内容不能为空!')
            //   }             
            //   this.$http.post("http://www.liulongbin.top:3005/api/postcomment" +
            //   this.$route.params.id, {content: this.msg.trim()} )
            //   .then(function(result){
            //      if(result.body.status == 0) {//数据拼接,新数据拼接旧数据
            //             var cmt = {
            //                  user_name: '匿名用户',
            //                  add_time: Date.now(),
            //                  content: this.msg.trim()
            //                 }
            //             this.comments.unshift(cmt)
            //             this.msg = ''
            //       }else{
            //           Toast('获取评论列表失败!')
            //       }
            // })
        }
    //props: ["id"]
  }
}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
              line-height: 30px;
              background-color: #ccc;   
            }
            .cmt-body{
               line-height: 37px;  
               text-indent: 2em;   
                }
        }
    }
}
</style>